#year {
	font-family:Droid;
	position:relative;
	font-size:3em;
	}

#slider{
	-webkit-appearance: none;
	width:500px;
	position:absolute;
	}

#slider::-webkit-slider-thumb{
	-webkit-appearance: none;
	background:#ea5506;
	width:1em;
	height:1em;
	border-radius:100%;
	transform:translateY(-45%);
	}

#slider::-webkit-slider-runnable-track{
	-webkit-appearance:none;
	border-radius:0.125em;
	height:0.1em;
	background:#f6bfbc;
}

//draw canvas
var canvas = d3.select("#canvasRow").insert("svg", ":first-child")
	.attr("width", 1100)
	.attr("height", 650)
	.style("margin-top", "1em");

//define colors based on min & max temperature
var minTemperature = -25; //-23.546
var maxTemperature = 25; //20.788

var color = d3.scaleLinear() //global variable
	.domain([minTemperature, 0, maxTemperature])
	.range(["#0000FF", "#FFFFFF", "#FF0000"]);

//create an array to store the selected temperature data
var temperatureArray = [];
var n = 0;
var i = 0;

function stateTemp(state, temperature) {
	this.state = state;
	this.temperature = temperature;
}

//create a variable to store the file path of temperature data, set default to 1990
var category = "../assets/images/portfolio/US Temperature/temperature by year/";
var year = 1900;
var fileType = ".csv";
var filePath = category.concat(year, fileType);

//load the default data and draw map once the html DOM is ready
jQuery(document).ready(function() {
	//read temeprature data from the 1990 temperature file, assign data to array
	d3.csv(filePath, function(data) {
		temperatureArray.length = 0;
		n = 0;
		i = 0;
		for (i in data) {
			temperatureArray[n] = new stateTemp(data[i].State, data[i].Average_Temperature);
			n = n + 1;
		}
		temperatureArray.splice(48, 1); //delete the last null object in the array
	})

	//read US geo data, draw US map, set each state the default color
	d3.json("../assets/images/portfolio/US Temperature/US Map.geojson", function(data) {

		var states = canvas.selectAll("g")
			.data(data.features)
			.enter()
			.append("g");

		var projection = d3.geoMercator().scale(1000).translate([2250, 1030]);
		var stateGeoPath = d3.geoPath().projection(projection);

		//draw & color states
		var area = states.append("path")
			.attr("d", stateGeoPath)
			.attr("class", "area")
			.attr("id", function(d) {
				return d.properties.NAME
			})
			.attr("fill", function(d) {
				for (var i in temperatureArray) {
					if (temperatureArray[i].state === d.properties.NAME) {
						return color(temperatureArray[i].temperature);
					}
				}
			});

		//append temperature texts
		states.append("text")
			.style("font-size", "0.6em")
			.attr("x", function(d) {
				return stateGeoPath.centroid(d)[0]
			})
			.attr("y", function(d) {
				return stateGeoPath.centroid(d)[1]
			})
			.text(function(d) {
				for (var i in temperatureArray) {
					if (temperatureArray[i].state === d.properties.NAME)
						return d3.format(".1f")(temperatureArray[i].temperature); //round decimal to nearst tenth
				}
			});

	})
});

//create output function
function outputUpdate(vol) {
	document.querySelector('#year').value = vol; //show year when sliding the slider

	//read new temperature file, assign new data to array
	year = vol;
	filePath = category.concat(year, fileType);

	d3.csv(filePath, function(data) {
		temperatureArray.length = 0;
		n = 0;
		i = 0;
		for (i in data) {
			temperatureArray[n] = new stateTemp(data[i].State, data[i].Average_Temperature);
			n = n + 1;
		}
		temperatureArray.splice(48, 1); //delete the last null object in the array

		//assign new colors and texts to each state
		for (var i in temperatureArray) {

			var statePath = "path[id='".concat(temperatureArray[i].state, "']");
			var statePathText = statePath.concat("+ text");

			d3.select(statePath).attr("fill", color(temperatureArray[i].temperature))
			d3.select(statePathText).text(d3.format(".1f")(temperatureArray[i].temperature));
		}
	})

}